<template>
<div class="order">
  <div>
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow />
  </div>

  <div style="background-color:red">
    <div style="height:10px;"></div>
    <van-cell-group inset style="height:80px;position:relative;top:10px;">
      <van-cell :title="usrname" :label="addresslist.length > 0 ? addresslist[0].address : 0" />
    </van-cell-group>
  </div>

  <div style="background-color:#ccc" v-if="list.length == 1">
    <div style="height:20px"></div>
    <van-cell-group style="margin-bottom:10px">
      <van-cell center title="品牌精选" value="以免运费|领券"/>
      <van-cell>
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-cell>
      <van-cell center title="发票类型" value="不开发票" />
      <van-cell center title="售后免邮" value="部分商家赠送" />
      <van-cell center title="卖家留言" value="内容" />
    </van-cell-group>
    <van-cell-group>
      <van-cell center title="商品金额" value="内容" />
      <van-cell center title="优惠活动" value="无" />
      <van-cell center title="优惠券" value="更多优惠券" />
    </van-cell-group>
  </div>

  <div v-else>
    <div style="height:20px"></div>
      <van-cell center title="品牌精选" value="以免运费|领券"/>
       <van-cell-group style="margin-bottom:10px" v-for="item in list" :key="item.id">
          <van-cell>
            <van-card
              :num="item.num"
              :price="item.price"
              desc="描述信息"
              :title="item.goodsname"
              :thumb="item.img"
            />
         </van-cell>
       </van-cell-group>
  </div>

  <van-submit-bar :price="countmoney*100" button-text="提交订单" @submit="onSubmit" />
</div>
</template>

<script>
import {Toast} from 'vant'
import { cartList, orderAdd } from '../request/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      list: [],
      countnumber: 0,
      countmoney: 0,
      idstr: null
    };
  },
  computed: {
    usrname(){
      return this.$store.getters.getUser.nickname
    },
    ...mapGetters({
      addresslist: 'getAddressList'
    })
  },
  methods: {
    onSubmit() {

     let a = {
        "uid": this.$store.getters.getUser.uid,
        "countmoney": this.countmoney,
        "countnumber":this.countnumber,
        "address": this.addresslist[0].id,
        "idstr": this.idstr
      }
      console.log(a,22233)
      orderAdd(a).then(res => {
        if(res.data.code == 200) {
          this.$router.push('/pay')
        }
      })
      
    },
    ...mapActions({
      getAddressAction: 'getAddressAction'
    })
  },
  mounted() {
    // 根据参数拿到购物车数据
    this.countnumber = this.$route.query.countnumber
    this.countmoney = this.$route.query.countmoney
    this.idstr = this.$route.query.idstr

    cartList({
      uid: this.$store.getters.getUser.uid,
    }).then((res) => {
      if (res.data.code == 200) {
        let temp = res.data.list?res.data.list:[];
        let str = this.idstr.split(',')
        temp.map(item => {
          str.forEach(i => {
            if (i == item.id) {
              this.list.push(item)
            }
          })
        })
      }
    }) 
    
    // 地址信息
    this.getAddressAction()
   
  }

};
</script>

<style scoped>
</style>
